<!--cms_page_list主页面-->
<template>
  <div>
    <el-select v-model="params.siteId" clearable placeholder="请选择站点">
      <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"/>
    </el-select>
    <el-input class="el-input" placeholder="请输入别名" v-model="params.pageAliase"  clearable/>
    <el-button type="primary" @click="clickQuery" icon="el-icon-search">查询</el-button>
    <!--  路由可以直接携带参数,前往下一个路由,下一个路由可以通过this.$route.query.key 取出参数回传返回路由(需要在Vue生命周期函数处理回调参数) -->
    <router-link :to="{path: '/cms/page/add', query: {
      page: this.params.page,
      siteId: this.params.siteId,
      pageAliase: this.params.pageAliase
    }}" class="mui-tab-item">
      <el-button type="primary" icon="el-icon-plus" >新增</el-button>
    </router-link>
    <el-table :data="list" stripe style="width: 100%"  v-loading="loading">
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="siteId" label="所属站点" width="120" />
      <el-table-column prop="pageName" label="页面名称" width="200"/>
      <el-table-column prop="pageAliase" label="别名" width="150" >
        <template v-slot:header="scope">
          别名
          <el-tooltip class="item" effect="dark" content="别名不是课程名,是课程详情页面的名字" placement="top-start">
            <el-icon class="el-icon-warning"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="80"/>
      <el-table-column prop="pageWebPath" label="访问路径" width="150"/>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="150"/>
      <el-table-column prop="pageCreateTime" label="创建时间" width="200"/>
      <el-table-column prop="pageUpdateTime" label="更新时间" width="200"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="preview(scope.$index, scope.row)">页面预览</el-button>
          <el-button size="mini" @click="postCmsPage(scope.$index, scope.row)">发布</el-button>
          <el-button size="mini" @click="editCmsPage(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteCmsPage(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页组件    -->
    <el-pagination class="el-pagination"  onselectstart="return false;" background layout="prev, pager, next"
                   :total="total" :page-size="params.size" :current-page="params.page"
                   hide-on-single-page @current-change="changePage"/>
    <!--  修改CmsPage打开的抽屉  -->
    <el-drawer title="修改站点信息" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-form ref="pageForm" :model="pageForm" label-width="80px" :rules="pageFormRules">
        <el-form-item label="所属站点" prop="siteId">
          <el-select v-model="pageForm.siteId">
            <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="选择模板" prop="templateId">
          <el-select v-model="pageForm.templateId">
            <el-option v-for="item in templateList" :key="item.key" :label="item.templateName" :value="item.templateId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="页面名称" prop="pageName">
          <el-input v-model="pageForm.pageName"/>
        </el-form-item>
        <el-form-item label="别名" prop="pageAliase">
          <el-input v-model="pageForm.pageAliase"/>
        </el-form-item>
        <el-form-item label="访问路径" prop="pageWebPath">
          <el-input v-model="pageForm.pageWebPath"/>
        </el-form-item>
        <el-form-item label="物理路径" prop="pagePhysicalPath">
          <el-input v-model="pageForm.pagePhysicalPath"/>
        </el-form-item>
        <el-form-item label="数据Url" prop="dataUrl">
          <el-input v-model="pageForm.dataUrl"/>
        </el-form-item>
        <el-form-item label="类型" prop="pageType">
          <el-radio-group v-model="pageForm.pageType">
            <el-radio class="el-radio" label="0">静态</el-radio>
            <el-radio class="el-radio" label="1">动态</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="pageForm.pageCreateTime" :disabled="true"/>
        </el-form-item>
        <el-form-item label="修改时间">
          <el-input v-model="pageForm.pageUpdateTime" :disabled="true"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  icon="el-icon-refresh-right" @click="resetEdit">重置</el-button>
          <el-button type="primary"  icon="el-icon-check" @click="updateEdit">提交</el-button>
          <el-button type="primary"  icon="el-icon-back" @click="cancelEdit">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
// 导入一个文件中的方法
import * as cmsApi from '../api/cms'
// 导入site中的方法
import * as siteApi from '../../site/api/site'
import * as templateApi from '../../template/api/template'

export default {
  data () {
    return {
      list: [], // 表格显示的数据
      total: 0, // 总的条数
      params: { // 分页参数
        page: 1, // :current-page 当前选中的页数
        size: 10, // :page-size 每页显示的页数
        siteId: '', // 用来存放用户选中的下拉站点id
        pageAliase: '' // 用来存放用户输入的站点别名
      },
      loading: true, // 设置表格加载时候的动画
      // 修改信息侧边栏需要用的参数
      siteList: '', // 站点列表, 请求后端获取
      templateList: '', // 页面模板下拉选择数据
      drawer: false,
      direction: 'rtl',
      // 侧边栏提交表单的参数
      pageForm: {
        pageId: '',
        siteId: '',
        templateId: '',
        pageName: '',
        pageAliase: '',
        pageWebPath: '',
        pageParameter: '',
        pagePhysicalPath: '',
        pageType: '',
        pageCreateTime: '',
        pageUpdateTime: '',
        dataUrl: ''
      },
      // 校验的参数
      pageFormRules: {
        siteId: [
          { required: true, message: '请选择站点ID', trigger: 'blur' }
        ],
        templateId: [
          { required: true, message: '请选择模板', trigger: 'blur' }
        ],
        pageName: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
        pageAliase: [
          { required: true, message: '请输入页面别名', trigger: 'blur' }
        ],
        pageWebPath: [
          { required: true, message: '请输入访问路径', trigger: 'blur' }
        ],
        pageParameter: [
          { required: true, message: '请输入参数', trigger: 'blur' }
        ],
        pagePhysicalPath: [
          { required: true, message: '请输入物理路径', trigger: 'blur' }
        ],
        pageType: [
          { required: true, message: '请选择页面类型', trigger: 'blur' }
        ],
        dataUrl: [
          {required: true, message: '请输入数据Url', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 查询站点信息,填充站点选择下拉列表
    queryCmsSite () {
      siteApi.SiteList().then(response => {
        this.siteList = response.queryResult.list
      })
    },
    // 当前模块查询数据列表的方法
    query () {
      this.loading = true
      // 调用../api/cms.js中的方法查询数据
      cmsApi.pageList(this.params.page, this.params.size, {
        siteId: this.params.siteId,
        pageAliase: this.params.pageAliase
      }).then((response) => {
        let temp = response.queryResult.list
        // 需要把站点id替换成站点名称
        temp.forEach(e => {
          this.siteList.forEach(y => {
            if (e.siteId === y.siteId) {
              e.siteId = y.siteName
            }
          })
        })
        this.list = temp
        this.total = response.queryResult.total
        this.loading = false
      })
    },
    // 当分页上面的页数点击时触发的事件 @current-change="changePage" val默认传入的是当前页码
    changePage (val) {
      this.params.page = val // 更改当前页面
      this.query() // 查询数据
    },
    // 当查询按钮被点击,需要重置当前页数,
    clickQuery () {
      this.params.page = 1
      this.params.size = 10
      this.query()
    },
    // 查询所有站点
    getSiteList () {
      siteApi.SiteList().then(response => {
        this.siteList = response.queryResult.list
      })
    },
    // 点击编辑按钮发生的事件, 打开侧边栏
    editCmsPage (index, row) {
      // 获取到当前这行数据的Id
      this.drawer = true
      // 后台查询数据, 赋值到侧边修改栏
      cmsApi.pageOne(row.pageId).then(response => {
        this.pageForm = response
      })
      // 查询所有站点信息
      this.getSiteList()
      // 查询所有模板信息
      templateApi.getCmsTemplateList().then(response => {
        this.templateList = response.queryResult.list
      })
    },
    // 修改信息侧边栏关闭事件
    handleClose (done) {
      this.$confirm('当前数据没有提交,是否关闭')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 侧边栏点击重置数据
    resetEdit () {
      cmsApi.pageOne(this.pageForm.pageId).then(response => {
        this.pageForm = response
      })
    },
    // 侧边栏点击保存按钮
    updateEdit () {
      // 校验数据
      this.$refs['pageForm'].validate((valid) => {
        if (valid) {
          cmsApi.pageEdit(this.pageForm.pageId, this.pageForm).then(response => {
            if (response.success) {
              this.$message({
                type: 'success',
                message: '修改成功',
                center: true,
                showClose: true
              })
              // 主动修改列表中已经修改好的数据
              for (let i = 0; i < this.list.length; i++) {
                if (response.cmsPage.pageId === this.list[i].pageId) {
                  this.list.splice(i, 1, response.cmsPage)
                }
              }
              this.drawer = false
            } else {
              this.$message({
                type: 'error',
                message: '添加失败',
                center: true,
                showClose: true
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 侧边栏点击取消按钮
    cancelEdit () {
      // 清空侧边栏表单
      this.pageForm = {}
      // 关闭侧边窗口
      this.drawer = false
    },
    // 点击删除按钮发生的事件
    deleteCmsPage (index, row) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cmsApi.pageDelete(row.pageId).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.query()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败,刷新页面再试!'
            })
          }
        })
      }).catch(() => {
      })
    },
    // 点击页面预览发生的事件
    preview (index, row) {
      window.open('http://www.xuecheng.com/cms/preview/' + row.pageId)
    },
    // 点击发布的事件
    postCmsPage (index, row) {
      this.$confirm('确定发布吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cmsApi.postCmsPage(row.pageId).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '发布成功!'
            })
            this.query()
          } else {
            this.$message({
              type: 'error',
              message: '发布失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    // 表头的提示信息
  },
  // 初始化页面查询数据
  mounted () {
    this.getSiteList()
    this.query() // 查询列表中的数据
    this.queryCmsSite() // 查询下拉列表中的数据
  },
  // 创建Vue时候
  created () {
    // 取出路由中的参数,复制给数据对象
    this.params.page = Number.parseInt(this.$route.query.page || 1)
    this.params.pageAliase = this.$route.query.pageAliase
    this.params.siteId = this.$route.query.siteId
  }
}
</script>

<style>
  .el-pagination {
    float: right;
  }
  .el-input {
    width: auto;
  }
</style>
